<template>
	<view class="page">
		<!-- 页面头部 -->
		<view class="header">
			<view class="nav-bar">
				<view class="nav-left" @click="goBack">
					<image src="/static/svg/dropdown.svg" class="back-icon" />
				</view>
				<text class="nav-title">银行卡管理</text>
				<view class="nav-right" @click="showAddCardModal">
					<text class="add-text">添加</text>
				</view>
			</view>
		</view>

		<!-- 银行卡列表 -->
		<view class="card-list">
			<view class="empty-state" v-if="bankCards.length === 0">
				<image src="/static/svg/gift.svg" class="empty-icon" />
				<text class="empty-text">还没有添加银行卡</text>
				<text class="empty-desc">添加银行卡后可以进行提现操作</text>
				<view class="add-card-btn" @click="showAddCardModal">
					<text class="btn-text">添加银行卡</text>
				</view>
			</view>

			<view class="card-item" v-for="card in bankCards" :key="card.id" @click="selectCard(card)">
				<view class="card-info">
					<view class="card-header">
						<image :src="getBankIcon(card.bankCode)" class="bank-icon" />
						<view class="bank-info">
							<text class="bank-name">{{ card.bankName }}</text>
							<text class="card-number">**** **** **** {{ card.cardNumber.slice(-4) }}</text>
						</view>
						<view class="card-actions">
							<view class="default-badge" v-if="card.isDefault">默认</view>
							<image src="/static/svg/more.svg" class="more-icon" @click.stop="showCardActions(card)" />
						</view>
					</view>
					<view class="card-details">
						<text class="cardholder-name">{{ card.cardholderName }}</text>
						<text class="bind-time">{{ card.bindTime }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 添加银行卡模态框 -->
		<view class="modal-overlay" v-if="addCardModalVisible" @click="hideAddCardModal">
			<view class="modal-content" @click.stop>
				<view class="modal-header">
					<text class="modal-title">添加银行卡</text>
					<view class="modal-close" @click="hideAddCardModal">×</view>
				</view>
				<view class="modal-body">
					<view class="form-item">
						<text class="form-label">持卡人姓名</text>
						<input 
							class="form-input" 
							placeholder="请输入持卡人姓名"
							v-model="newCard.cardholderName"
						/>
					</view>
					<view class="form-item">
						<text class="form-label">银行卡号</text>
						<input 
							class="form-input" 
							placeholder="请输入银行卡号"
							type="number"
							v-model="newCard.cardNumber"
							@input="onCardNumberInput"
						/>
					</view>
					<view class="form-item">
						<text class="form-label">所属银行</text>
						<view class="bank-selector" @click="showBankSelector">
							<text class="bank-text" :class="{ placeholder: !newCard.bankName }">
								{{ newCard.bankName || '请选择银行' }}
							</text>
							<image src="/static/svg/dropdown.svg" class="dropdown-icon" />
						</view>
					</view>
					<view class="form-item">
						<text class="form-label">手机号码</text>
						<input 
							class="form-input" 
							placeholder="银行预留手机号"
							type="number"
							v-model="newCard.phoneNumber"
						/>
					</view>
					<view class="form-tips">
						<text class="tip-text">• 银行卡信息仅用于提现，我们承诺保护您的隐私安全</text>
						<text class="tip-text">• 首次添加的银行卡将自动设为默认提现卡</text>
					</view>
				</view>
				<view class="modal-footer">
					<view class="modal-btn cancel" @click="hideAddCardModal">取消</view>
					<view class="modal-btn confirm" @click="confirmAddCard">确认添加</view>
				</view>
			</view>
		</view>

		<!-- 银行选择模态框 -->
		<view class="modal-overlay" v-if="bankSelectorVisible" @click="hideBankSelector">
			<view class="bank-modal" @click.stop>
				<view class="bank-header">
					<text class="bank-title">选择银行</text>
					<view class="bank-close" @click="hideBankSelector">×</view>
				</view>
				<view class="bank-list">
					<view 
						class="bank-option"
						v-for="bank in bankList"
						:key="bank.code"
						@click="selectBank(bank)"
					>
						<image :src="getBankIcon(bank.code)" class="option-icon" />
						<text class="option-name">{{ bank.name }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 银行卡操作模态框 -->
		<view class="modal-overlay" v-if="cardActionsVisible" @click="hideCardActions">
			<view class="actions-modal" @click.stop>
				<view class="action-item" @click="setDefaultCard" v-if="!selectedCard?.isDefault">
					<text class="action-text">设为默认</text>
				</view>
				<view class="action-item" @click="editCard">
					<text class="action-text">编辑</text>
				</view>
				<view class="action-item danger" @click="deleteCard">
					<text class="action-text">删除</text>
				</view>
				<view class="action-item cancel" @click="hideCardActions">
					<text class="action-text">取消</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';

// 银行卡列表
const bankCards = ref([
	{
		id: 1,
		cardNumber: '6225881234567890',
		cardholderName: '张三',
		bankName: '中国工商银行',
		bankCode: 'ICBC',
		phoneNumber: '138****5678',
		isDefault: true,
		bindTime: '2024-01-10 绑定'
	},
	{
		id: 2,
		cardNumber: '6227001234567890',
		cardholderName: '张三',
		bankName: '中国建设银行',
		bankCode: 'CCB',
		phoneNumber: '138****5678',
		isDefault: false,
		bindTime: '2024-01-05 绑定'
	}
]);

// 模态框状态
const addCardModalVisible = ref(false);
const bankSelectorVisible = ref(false);
const cardActionsVisible = ref(false);

// 新银行卡信息
const newCard = ref({
	cardholderName: '',
	cardNumber: '',
	bankName: '',
	bankCode: '',
	phoneNumber: ''
});

// 选中的银行卡
const selectedCard = ref(null);

// 银行列表
const bankList = ref([
	{ name: '中国工商银行', code: 'ICBC' },
	{ name: '中国建设银行', code: 'CCB' },
	{ name: '中国银行', code: 'BOC' },
	{ name: '中国农业银行', code: 'ABC' },
	{ name: '招商银行', code: 'CMB' },
	{ name: '交通银行', code: 'BOCOM' },
	{ name: '中信银行', code: 'CITIC' },
	{ name: '中国光大银行', code: 'CEB' },
	{ name: '华夏银行', code: 'HXB' },
	{ name: '中国民生银行', code: 'CMBC' },
	{ name: '平安银行', code: 'PAB' },
	{ name: '广发银行', code: 'GDB' }
]);

// 显示添加银行卡模态框
const showAddCardModal = () => {
	addCardModalVisible.value = true;
	// 重置表单
	newCard.value = {
		cardholderName: '',
		cardNumber: '',
		bankName: '',
		bankCode: '',
		phoneNumber: ''
	};
};

// 隐藏添加银行卡模态框
const hideAddCardModal = () => {
	addCardModalVisible.value = false;
};

// 显示银行选择器
const showBankSelector = () => {
	bankSelectorVisible.value = true;
};

// 隐藏银行选择器
const hideBankSelector = () => {
	bankSelectorVisible.value = false;
};

// 选择银行
const selectBank = (bank) => {
	newCard.value.bankName = bank.name;
	newCard.value.bankCode = bank.code;
	hideBankSelector();
};

// 银行卡号输入处理
const onCardNumberInput = () => {
	// 自动识别银行（简单示例）
	const cardNumber = newCard.value.cardNumber;
	if (cardNumber.startsWith('622588')) {
		newCard.value.bankName = '中国工商银行';
		newCard.value.bankCode = 'ICBC';
	} else if (cardNumber.startsWith('622700')) {
		newCard.value.bankName = '中国建设银行';
		newCard.value.bankCode = 'CCB';
	}
	// 可以添加更多银行卡号识别规则
};

// 确认添加银行卡
const confirmAddCard = () => {
	// 验证表单
	if (!newCard.value.cardholderName.trim()) {
		uni.showToast({
			title: '请输入持卡人姓名',
			icon: 'none'
		});
		return;
	}
	
	if (!newCard.value.cardNumber.trim()) {
		uni.showToast({
			title: '请输入银行卡号',
			icon: 'none'
		});
		return;
	}
	
	if (newCard.value.cardNumber.length < 16) {
		uni.showToast({
			title: '银行卡号格式不正确',
			icon: 'none'
		});
		return;
	}
	
	if (!newCard.value.bankName) {
		uni.showToast({
			title: '请选择所属银行',
			icon: 'none'
		});
		return;
	}
	
	if (!newCard.value.phoneNumber.trim()) {
		uni.showToast({
			title: '请输入手机号码',
			icon: 'none'
		});
		return;
	}
	
	// 添加银行卡
	const card = {
		id: Date.now(),
		...newCard.value,
		isDefault: bankCards.value.length === 0, // 第一张卡自动设为默认
		bindTime: new Date().toLocaleDateString() + ' 绑定'
	};
	
	bankCards.value.unshift(card);
	
	uni.showToast({
		title: '添加成功',
		icon: 'success'
	});
	
	hideAddCardModal();
};

// 选择银行卡
const selectCard = (card) => {
	// 可以跳转到银行卡详情页面
	uni.showToast({
		title: `选择了${card.bankName}`,
		icon: 'none'
	});
};

// 显示银行卡操作
const showCardActions = (card) => {
	selectedCard.value = card;
	cardActionsVisible.value = true;
};

// 隐藏银行卡操作
const hideCardActions = () => {
	cardActionsVisible.value = false;
	selectedCard.value = null;
};

// 设为默认银行卡
const setDefaultCard = () => {
	if (!selectedCard.value) return;
	
	// 取消其他卡的默认状态
	bankCards.value.forEach(card => {
		card.isDefault = card.id === selectedCard.value.id;
	});
	
	uni.showToast({
		title: '设置成功',
		icon: 'success'
	});
	
	hideCardActions();
};

// 编辑银行卡
const editCard = () => {
	hideCardActions();
	uni.showToast({
		title: '编辑功能开发中',
		icon: 'none'
	});
};

// 删除银行卡
const deleteCard = () => {
	if (!selectedCard.value) return;
	
	uni.showModal({
		title: '确认删除',
		content: `确定要删除这张${selectedCard.value.bankName}卡吗？`,
		success: (res) => {
			if (res.confirm) {
				const index = bankCards.value.findIndex(card => card.id === selectedCard.value.id);
				if (index > -1) {
					bankCards.value.splice(index, 1);
					
					// 如果删除的是默认卡且还有其他卡，将第一张设为默认
					if (selectedCard.value.isDefault && bankCards.value.length > 0) {
						bankCards.value[0].isDefault = true;
					}
					
					uni.showToast({
						title: '删除成功',
						icon: 'success'
					});
				}
				hideCardActions();
			}
		}
	});
};

// 获取银行图标
const getBankIcon = (bankCode) => {
	// 这里可以根据银行代码返回对应的图标
	// 暂时使用通用图标
	return '/static/svg/gift.svg';
};

// 返回上一页
const goBack = () => {
	uni.navigateBack();
};
</script>

<style scoped>
.page {
	min-height: 100vh;
	background: #f8f9fa;
}

/* 页面头部 */
.header {
	background: white;
	padding-top: var(--status-bar-height);
}

.nav-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 15px 20px;
}

.nav-left {
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.back-icon {
	width: 20px;
	height: 20px;
	transform: rotate(-90deg);
}

.nav-title {
	font-size: 18px;
	font-weight: bold;
	color: #333;
}

.nav-right {
	width: 50px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.add-text {
	font-size: 16px;
	color: #667eea;
}

/* 银行卡列表 */
.card-list {
	padding: 20px;
}

.empty-state {
	text-align: center;
	padding: 80px 20px;
}

.empty-icon {
	width: 80px;
	height: 80px;
	margin-bottom: 20px;
	opacity: 0.3;
}

.empty-text {
	font-size: 18px;
	color: #333;
	display: block;
	margin-bottom: 10px;
}

.empty-desc {
	font-size: 14px;
	color: #999;
	display: block;
	margin-bottom: 30px;
}

.add-card-btn {
	background: #667eea;
	color: white;
	padding: 12px 30px;
	border-radius: 25px;
	display: inline-block;
}

.btn-text {
	font-size: 16px;
}

.card-item {
	background: white;
	border-radius: 16px;
	padding: 20px;
	margin-bottom: 15px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
	cursor: pointer;
}

.card-item:active {
	background: #f8f9fa;
}

.card-header {
	display: flex;
	align-items: center;
	margin-bottom: 15px;
}

.bank-icon {
	width: 40px;
	height: 40px;
	margin-right: 15px;
}

.bank-info {
	flex: 1;
}

.bank-name {
	font-size: 16px;
	font-weight: bold;
	color: #333;
	display: block;
	margin-bottom: 5px;
}

.card-number {
	font-size: 14px;
	color: #666;
	display: block;
	font-family: 'Courier New', monospace;
}

.card-actions {
	display: flex;
	align-items: center;
	gap: 10px;
}

.default-badge {
	background: #667eea;
	color: white;
	padding: 4px 8px;
	border-radius: 10px;
	font-size: 12px;
}

.more-icon {
	width: 20px;
	height: 20px;
	opacity: 0.6;
}

.card-details {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.cardholder-name {
	font-size: 14px;
	color: #666;
}

.bind-time {
	font-size: 12px;
	color: #999;
}

/* 模态框样式 */
.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1000;
}

.modal-content {
	background: white;
	border-radius: 16px;
	padding: 0;
	width: 85%;
	max-width: 400px;
	max-height: 80vh;
	overflow-y: auto;
}

.modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px;
	border-bottom: 1px solid #f0f0f0;
}

.modal-title {
	font-size: 18px;
	font-weight: bold;
	color: #333;
}

.modal-close {
	font-size: 24px;
	font-weight: bold;
	color: #999;
	cursor: pointer;
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.modal-body {
	padding: 20px;
}

.form-item {
	margin-bottom: 20px;
}

.form-label {
	font-size: 14px;
	color: #333;
	display: block;
	margin-bottom: 8px;
}

.form-input {
	width: 100%;
	padding: 12px 15px;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	font-size: 16px;
	box-sizing: border-box;
}

.form-input:focus {
	border-color: #667eea;
	outline: none;
}

.bank-selector {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 15px;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	cursor: pointer;
}

.bank-text {
	font-size: 16px;
	color: #333;
}

.bank-text.placeholder {
	color: #999;
}

.dropdown-icon {
	width: 16px;
	height: 16px;
	transform: rotate(90deg);
}

.form-tips {
	background: #fff3cd;
	border: 1px solid #ffeaa7;
	border-radius: 8px;
	padding: 15px;
	margin-top: 20px;
}

.tip-text {
	font-size: 12px;
	color: #856404;
	display: block;
	margin-bottom: 5px;
}

.tip-text:last-child {
	margin-bottom: 0;
}

.modal-footer {
	display: flex;
	gap: 10px;
	padding: 20px;
	border-top: 1px solid #f0f0f0;
}

.modal-btn {
	flex: 1;
	font-size: 16px;
	padding: 12px 20px;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	transition: all 0.3s;
	text-align: center;
}

.modal-btn.cancel {
	background: #f8f9fa;
	color: #666;
}

.modal-btn.cancel:active {
	background: #e9ecef;
}

.modal-btn.confirm {
	background: #667eea;
	color: white;
}

.modal-btn.confirm:active {
	background: #5a6fd8;
}

/* 银行选择模态框 */
.bank-modal {
	background: white;
	border-radius: 16px;
	width: 80%;
	max-width: 350px;
	max-height: 60vh;
	overflow: hidden;
}

.bank-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px;
	border-bottom: 1px solid #f0f0f0;
}

.bank-title {
	font-size: 18px;
	font-weight: bold;
	color: #333;
}

.bank-close {
	font-size: 24px;
	font-weight: bold;
	color: #999;
	cursor: pointer;
}

.bank-list {
	max-height: 40vh;
	overflow-y: auto;
	padding: 10px 0;
}

.bank-option {
	display: flex;
	align-items: center;
	padding: 15px 20px;
	cursor: pointer;
}

.bank-option:active {
	background: #f8f9fa;
}

.option-icon {
	width: 30px;
	height: 30px;
	margin-right: 15px;
}

.option-name {
	font-size: 16px;
	color: #333;
}

/* 操作模态框 */
.actions-modal {
	background: white;
	border-radius: 16px;
	width: 80%;
	max-width: 300px;
	overflow: hidden;
}

.action-item {
	padding: 15px 20px;
	text-align: center;
	cursor: pointer;
	border-bottom: 1px solid #f0f0f0;
}

.action-item:last-child {
	border-bottom: none;
}

.action-item:active {
	background: #f8f9fa;
}

.action-item.danger {
	color: #dc3545;
}

.action-item.cancel {
	background: #f8f9fa;
	color: #666;
}

.action-text {
	font-size: 16px;
}
</style> 